import {dateFormat,monthAdd,weekAdd,getFirstDateOfWeek,getWeeksOfYear,
    getLastDateOfWeek,getLastDateOfMonth,fillZero,replaceByObj} from "./xUtil.js"
import xID from './xID.js';

/**
 *
 vType : date ,date-range , month  month-range ,week week-range  quarter querter-range year year-range
 *
 */

const zhDay = ['一','二','三','四','五','六','日'];

const hintWord={
    dateBegin:'请选择开始日期', dateEnd:'请选择结束日期',
    weekBegin:'请选择开始周',  weekEnd:'请选择结束周',
    monthBegin:'请选择开始月份',  monthEnd:'请选择结束月份',
    quarterBegin:'请选择开始季度',  quarterEnd:'请选择结束季度',
    yearBegin:'请选择开始年份',yearEnd:'请选择结束年份',
    timeBegin:'请选择开始时间',timeEnd:'请选择结束时间',
    date:'请选择日期',time:'请选择时间'
};

const format ={
    date:'yyyy-MM-dd',
    datetime: 'yyyy-MM-dd hh:mm:ss',
    time:'hh:mm:ss',
    week:'W',
    month:'yyyyMM',
    quarter:'Q',
    year:'yyyy'
}

const tmplTr = '<tr>{{tr}}</tr>';
const tmplTd = '<td >{{td}}</td>';
const tmplSpanTd =  '<td {{colspan}} {{rowspan}}>{{td}}</td>'
const tmplSpan ='<span {{style}} type="{{type}}" data-code="{{dataCode}}" {{hint}}>{{name}}</span>';
const tmplButton ='<button {{type}} class="btn btn-sm btn-outline-secondary">{{name}}</button>';
const tmplItem =  '<div type="date-item">{{item}}</div>';
const tmplHint ='title="{{hint}}"';
const tmplFooter ='{{time}}{{date}}{{now}}{{preMonth}}{{month}}{{preWeek}}{{week}}{{yesterday}}{{today}}{{clear}} {{ok}}';
const tmplTitle = '{{doublePre}}{{pre}}{{yearTitle}}{{monthTitle}}{{next}}{{doubleNext}}';
const tmplClass =  'class="{{out}} {{inside}} {{now}}"';
const tmplIcon     = '<i  type="{{type}}" data-code ="{{dataCode}}" class="p-1 iconfont {{icon}}" {{hint}}></i>';

const tmplBase    = `<div class="{{class}}" >
                     <div type="date-head" class="xhead">  
                        <input  readonly="readonly" class="xinput-icon"> 
                        <i class="iconfont icon-dropdown after-icon-set"></i>                                                                          
                    </div>
                    <div type ="date-main" class="xmain">                                        
                    </div>
                 </div>  `;
const tmplHintDiv = '<div type ="date-hint">{{hint}}</div>';
const tmplTitleDiv = '<div type ="date-title">{{title}}</div>';
const tmplTable = `<table  >
                            <thead type="date-thead">{{thead}}
                            </thead>
                            <tbody type="date-tbody" >{{tbody}}
                            </tbody>
                        </table>`;
const tmplFooterDiv = '<div type="date-footer">{{footer}}</div>';
const  splitChar=' ~ ';
const tmplHeadTitle = 'title="{{title}}"';

export default class xDatePicker {
    /* 定义变量 开始*/
    vCfg;
    $root ;
    $main ;
    $thead;
    $tbody;
    $title;
    $head;
    $input;
    $hintWord;
    $footer;
    vTmpEvent ={};
    vStep =0;
    vSelect = [];
    vClickId = 'click.'+xID.getID();
    vMonth = dateFormat(new Date(),'yyyy-MM');
    vYear =  dateFormat(new Date(),'yyyy');
    //绑定事件和 xBind 联动用
    vBindEvent;
    vFormat;
    /*根据 format 来 时分秒 全设置 1 ，分设置 2 只设置时间 3*/
    vTimeType =1;
    // Hour  显示 1 显示0--11 ,2 显示:12-23 , ...
    vHourShow = 0;
    vMinuteShow =0;
    vSecondShow =0;

    //记录 time 是否点击完成  0b1 表示 时间位 0b10 表示分位 0b100 表示 秒位
    vTimeFlag =0b0;
    /*定义变量 结束*/
    // 构造函数
    constructor(cfg) {
        this.vCfg=cfg;
        this.$root = $('#' + cfg.el);
        this.init();
        this.refresh();
    };

    refresh(){
        this.vSelect=[];
        if(this.vCfg.format){
            this.vFormat=this.vCfg.format;
            if(['datetime','time','datetime-range','time-range'].includes(this.vCfg.type)){
                if(this.vFormat.indexOf('m')>=0){
                    if(this.vFormat.indexOf('s')<0)
                        this.vTimeType = 2;
                }else
                    this.vTimeType = 3 ;
            }
        }
        else
            this.vFormat = format[this.vCfg.type?this.vCfg.type.split('-')[0]:'date'];
        if(this.vCfg.active)
            this.initValue(this.vCfg.active)
        this.renderHead();
        this.$main.hide();
    }

    init(){
        this.$root.html(tmplBase.replace('{{class}}',this.vCfg.style||'date' ));
        if(!this.vCfg.type)
            this.vCfg.type = 'date';
        this.$main = this.$root.find('[type="date-main"]');
        this.$head = this.$root.find('[type="date-head"]');
        this.$input = this.$root.find('input');
        this.$main.hide();
        this.$root.on('click', this.evRootClick.bind(this));
        this.$root.on('click', '[type="date-head"]', this.evDrop.bind(this));
        this.$root.on('click', '[type="date"]', this.evItemClick.bind(this));
        this.$root.on('click', '[type="week"]', this.evItemClick.bind(this));
        this.$root.on('click', '[type="month"]', this.evItemClick.bind(this));
        this.$root.on('click', '[type="quarter"]', this.evItemClick.bind(this));
        this.$root.on('click', '[type="year"]', this.evItemClick.bind(this));
        this.$root.on('click', '[type="date-pre"]', this.evPreClick.bind(this));
        this.$root.on('click', '[type="date-next"]', this.evNextClick.bind(this));
        this.$root.on('click', '[type="date-double-pre"]', this.evDoublePreClick.bind(this));
        this.$root.on('click', '[type="date-double-next"]', this.evDoubleNextClick.bind(this));
        this.$root.on('click', '[type="date-today"]', this.evQuickClick.bind(this));
        this.$root.on('click', '[type="date-the-week"]', this.evQuickClick.bind(this));
        this.$root.on('click', '[type="date-the-month"]', this.evQuickClick.bind(this));
        this.$root.on('click', '[type="date-yesterday"]', this.evQuickClick.bind(this));
        this.$root.on('click', '[type="date-pre-week"]', this.evQuickClick.bind(this));
        this.$root.on('click', '[type="date-pre-month"]', this.evQuickClick.bind(this));
        this.$root.on('click', '[type="date-clear"]', this.evClearClick.bind(this));
        this.$root.on('click', '[type="date-ok"]', this.evOkClick.bind(this));
        this.$root.on('click', '[type="time-show"]', this.evTimeShowClick.bind(this));
        this.$root.on('click', '[type="date-show"]', this.evDateShowClick.bind(this));
        this.$root.on('click', '[type="year-title"]', this.evYearTitleClick.bind(this));
        this.$root.on('click', '[type="month-title"]', this.evMonthTitleClick.bind(this));
        this.$root.on('click', '[type="year-select"]', this.evYearSelectClick.bind(this));
        this.$root.on('click', '[type="month-select"]', this.evMonthSelectClick.bind(this));
        this.$root.on('click', '[type="year-double-pre"]', this.evYearDoublePreClick.bind(this));
        this.$root.on('click', '[type="year-double-next"]', this.evYearDoubleNextClick.bind(this));

        /*时分秒 切换*/
        this.$root.on('click','[type="hour-next"]',this.evHourNextClick.bind(this));
        this.$root.on('click','[type="minute-next"]',this.evMinuteNextClick.bind(this));
        this.$root.on('click','[type="second-next"]',this.evSecondNextClick.bind(this));
        /*时 分 秒 */
        this.$root.on('click','[type="hour"]',this.evTimeClick.bind(this));
        this.$root.on('click','[type="minute"]',this.evTimeClick.bind(this));
        this.$root.on('click','[type="second"]',this.evTimeClick.bind(this));
        /*title click 后 选择年 月*/
        this.$root.on('click','[type="year-select"]',this.evYearSelectClick.bind(this));
        this.$root.on('click','[type="month-select"]',this.evMonthSelectClick.bind(this));

        this.$input.on('focus',this.evFocus.bind(this));
        this.$root.on('keydown',this.evKeydown.bind(this));

        let title ='';
        if(this.vCfg.title)
            title = tmplHeadTitle.replace("{{title}}",this.vCfg.title);
        if(this.vCfg.type.split('-')[1] && !this.vCfg.placeholder)
            this.vCfg.placeholder = '________'+splitChar+'________';
        if(this.vCfg.placeholder)
            this.$input.attr("placeholder",this.vCfg.placeholder);
        this.$head.attr("title",title);
        if(this.vCfg.readonly)
            this.setReadonly(true);
    }

    initValue(value){
        if(value == this.vSelect.join(','))
            return;
        let ok = true;
        if(value){
            this.vSelect=value.split(',');
            if(this.vSelect[0] && new Date(this.vSelect[0])=='Invalid Date')
                ok = false;
            if(this.vSelect[1] && new Date(this.vSelect[1]) =='Invalid Date')
                ok = false;
        }
        if(value && ok){
            switch(this.vCfg.type){
                case 'date':
                case 'date-range':
                case 'datetime':
                case 'datetime-range':
                    this.vMonth = this.vSelect[0].substr(0,7);
                    this.vYear = this.vSelect[0].substr(0,4);
                    break;
                default:
                    this.vYear = this.vSelect[0].substr(0,4);
            }
        }
        else{
            this.vSelect =[];
            this.vMonth = dateFormat(new Date(),'yyyy-MM');
            this.vYear =  dateFormat(new Date(),'yyyy');
        }
        this.renderHead();
        this.verify();
    }

    /*需要重新整理 应该是不存在 datetime 和 datatime-range 类型*/
    renderTitle(renderType){
        let [html,yearTitle,monthTitle]=['','',''];
        let tmplDoublePre = replaceByObj(tmplIcon,{dataCode:'',hint:'',icon:"icon-double-left",
            type:"date-double-pre"});
        let tmplPre= replaceByObj(tmplIcon,{dataCode:'',hint:'',icon:"icon-left",
            type:"date-pre"});
        let tmplNext= replaceByObj(tmplIcon,{dataCode:'',hint:'',icon:"icon-right",
            type:"date-next"});
        let tmplDoubleNext= replaceByObj(tmplIcon,{dataCode:'',hint:'',icon:"icon-double-right",
            type:"date-double-next"});
        let tmplDoubleYearPre=replaceByObj(tmplIcon,{dataCode:'',hint:'',icon:"icon-double-left",
            type:"year-double-pre"});
        let tmplDoubleYearNext=replaceByObj(tmplIcon,{dataCode:'',hint:'',icon:"icon-double-right",
            type:"year-double-next"});

        let type = renderType||this.vCfg.type;
        switch(type){
            case 'date':
            case 'date-range':
                yearTitle = replaceByObj(tmplSpan,{type:'year-title',
                    style:'',dataCode:'',hint:'',name:this.vMonth.substr(0,4)+' 年'});
                monthTitle = replaceByObj(tmplSpan,{type:'month-title',
                    style:'',dataCode:'',hint:'',name:this.vMonth.substr(5,2)-0+' 月'});
                html = replaceByObj(tmplTitle,{yearTitle,monthTitle,doublePre:tmplDoublePre,pre:tmplPre,
                    next:tmplNext,doubleNext:tmplDoubleNext});
                break;
            case 'year':
            case 'year-range':
                yearTitle = replaceByObj(tmplSpan,{dateKey:'year-title',
                    style:'',dataCode:'',hint:'',name:this.vYear-6+'年-'+(this.vYear-0+5)+'年'});
                monthTitle = '';
                html = replaceByObj(tmplTitle, {yearTitle,monthTitle, doublePre:tmplDoublePre,pre:'',
                    next:'',doubleNext:tmplDoubleNext});
                break;
            case 'year-set':
                yearTitle = replaceByObj(tmplSpan,{type:'',
                    style:'',dataCode:'',hint:'',name:this.vYear-6+'年-'+(this.vYear-0+5)+'年'});
                monthTitle = '';
                html = replaceByObj(tmplTitle, {yearTitle,monthTitle, doublePre:tmplDoubleYearPre,pre:'',
                    next:'',doubleNext:tmplDoubleYearNext});
                break;
            case 'week':
            case 'week-range':
            case 'month':
            case 'month-range':
            case 'quarter':
            case 'quarter-range':
                yearTitle = replaceByObj(tmplSpan,{type:'year-title',
                    style:'',dataCode:'',hint:'',name:this.vYear+' 年'});
                monthTitle = '';
                html = replaceByObj(tmplTitle, {yearTitle,monthTitle, doublePre:'',pre:tmplPre,
                    next:tmplNext,doubleNext:''});
                break;
            case 'time':
                break;
        }
        return html.trim()
    }

    /*
      总共 4 个状态
        active  ,无 active
        valid,无valid ,invalid
     */
    renderStatus(action,status){
        if(action=='add'){
            this.$head.addClass(status);
        }else{
            this.$head.removeClass(status);
        }
    }

    renderHead(){
        let val ='';
        let types = this.vCfg.type.split('-');
        if(this.vSelect[0])
            val = this.getFormat(this.vSelect[0],types[0],this.vFormat);
        if(types[1] && val){
            if(this.vSelect[1])
                val += splitChar+this.getFormat(this.vSelect[1],types[0],this.vFormat)
            else
                val += splitChar+'________';
        }
        /*if(types[1] && val=='' && !this.vCfg.placeholder)
            val = '________'+splitChar+'________';*/
        this.$input.val(val);
        //this.renderStatus();
    }

    //只有日期需要表头
    renderThead(renderType){
        let html = '';
        let needHead = false;
        let type = renderType || this.vCfg.type
        if(['date','date-range'].includes(type))
            needHead = true;
        if(type== 'datetime' && this.vStep==0)
            needHead = true;
        if(type== 'datetime-range' && [0,2].includes(this.vStep))
            needHead =true;
        if(needHead){
            for(let i=0;i<7;i++){
                html +=tmplTd.replace('{{td}}',replaceByObj(tmplSpan,{type:'',name:zhDay[i]}));
            }
        }
        if(html)
            return tmplTr.replace('{{tr}}',html);
        else
            return html;
    }

    renderHint(word){
        let html ='';
        if(word)
            html = replaceByObj(tmplSpan,{style:'',type:'',dataCode:'',
                name:hintWord[word],hint:''});
        return html;
    }
    //这里类型 除了  控件类型 ，还包括 设置年份 和 设置月份的
    renderTbody(renderType){
        let jd = this.getRenderJd(renderType)
        let [tdHtml,trHtml,colCount] = ['','',1,];
        let type = renderType?renderType:this.vCfg.type;
        switch(type){
            case 'date':
            case 'date-range':
            case 'datetime':
            case 'datetime-range':
                colCount = 7
                break;
            case 'week':
            case 'week-range':
                colCount = 7;
                break;
            case 'month':
            case 'month-range':
                colCount = 4;
                break;
            case 'quarter':
            case 'quarter-range':
                colCount = 2;
                break;
            case 'year':
            case 'year-range':
            case 'year-set':
                colCount = 4;
                break;
            case  'month-set':
                colCount = 3;
                break;
        }
        if(['datetime','datetime-range'].includes(type))
            type ='date';
        for(let i=0;i<jd.length;i++){
            tdHtml += tmplTd.replace('{{td}}',this.renderItem(jd[i],type));
            if(i%colCount==colCount-1){
                trHtml += tmplTr.replace('{{tr}}',tdHtml);
                tdHtml ='';
            }else{
                //最后一个要补全td
                if(i==jd.length-1){
                    let colspan = 'colspan="'+(colCount-i%colCount-1)+'"';
                    let lastTd = replaceByObj(tmplSpanTd,
                        {td:'',rowspan:'', colspan});
                    tdHtml +=lastTd;
                    trHtml += tmplTr.replace('{{tr}}',tdHtml);
                }
            }
        }

        return trHtml;
    }

    renderTimeTbody(){
        let [hHtml,mHtml,sHtml]=[this.renderTimeItem('hour'),'',''];
        switch(this.vTimeType){
            case 1:
                mHtml = this.renderTimeItem('minute');
                sHtml = this.renderTimeItem('second');
                break;
            case 2:
                mHtml = this.renderTimeItem('minute');
                break;
        }
        return hHtml+mHtml+sHtml;
    }

    renderTimeItem(type){
        let [tds,trs]=['',''] ;
        let show;
        switch(type){
            case 'hour':
                show = this.vHourShow;
                break;
            case 'minute':
                show = this.vMinuteShow;
                break;
            case 'second':
                show = this.vSecondShow;
                break;
        }
        let colspan ='colspan="6"';
        let rowspan = '';
        let title = this.renderItem({name:'',code:''},type+'Title');
        tds = replaceByObj(tmplSpanTd,{colspan,rowspan,td:title});
        trs =  tmplTr.replace('{{tr}}',tds);
        let code;
        tds ='';

        for(let i=0;i<(this.vTimeType==3?24:12);i++){
            code =fillZero(2,i+12*show);
            tds += tmplTd.replace('{{td}}',this.renderItem({name:code,code:code},type));
            if([5,11,17,23].includes(i)){
                trs +=  tmplTr.replace('{{tr}}',tds);
                tds = '';
            }
        }
        return trs;
    }

    renderTime(){
        let [hint,title,thead,tbody,footer]=['','','','',''];
        switch(this.vStep){
            case 0:
                hint=this.renderHint(this.vCfg.type=='time'?'':'timeBegin');
                title=this.renderTitle();
                thead=this.renderThead();
                tbody=this.renderTimeTbody();
                footer=this.renderFooter();
                break;
            case 1:
                if(this.vCfg.type =='time-range')
                    hint=this.renderHint(this.vCfg.type=='time'?'time':'timeEnd');
                else
                    hint=this.renderHint(this.vCfg.type=='time'?'time':'timeBegin');
                title=this.renderTitle();
                thead=this.renderThead();
                tbody=this.renderTimeTbody();
                footer=this.renderFooter();
                break;
            case 3:
                hint=this.renderHint(this.vCfg.type=='time'?'time':'timeEnd');
                title=this.renderTitle();
                thead=this.renderThead();
                tbody=this.renderTimeTbody();
                footer=this.renderFooter();
                break;
        }
        if(hint)
            hint = tmplHintDiv.replace('{{hint}}',hint);
        if(title)
            title = tmplTitleDiv.replace('{{title}}',title);
        if(tbody)
            tbody = replaceByObj(tmplTable,{thead,tbody});
        if(footer)
            footer = tmplFooterDiv.replace('{{footer}}',footer);
        this.$main.html(hint+title+tbody+footer);

    }

    renderByType(){
        switch(this.vCfg.type){
            case 'time':
            case 'time-range':
                this.renderTime();
                break;
            case 'date':
            case 'date-range':
                this.renderDate();
                break;
            case 'datetime':
            case 'datetime-range':
                this.renderDatetime();
                break;
            case 'week':
            case 'week-range':
                this.renderWeek();
                break;
            case 'month':
            case 'month-range':
                this.renderMonth();
                break;
            case 'quarter':
            case 'quarter-range':
                this.renderQuarter();
                break;
            case 'year':
            case 'year-range':
                this.renderYear();
                break;
        }
    }

    renderDate(){
        let [hint,title,thead,tbody,footer]=['','','','',''];
        if(this.vCfg.type =='date-range'){
            if(this.vStep==0)
                hint = this.renderHint('dateBegin');
            else
                hint=this.renderHint('dateEnd');
        }
        else
            hint = this.renderHint();
        title=this.renderTitle();
        thead=this.renderThead();
        tbody=this.renderTbody();
        footer=this.renderFooter();

        if(hint)
            hint = tmplHintDiv.replace('{{hint}}',hint);
        if(title)
            title = tmplTitleDiv.replace('{{title}}',title);
        if(tbody)
            tbody = replaceByObj(tmplTable,{thead,tbody});
        if(footer)
            footer = tmplFooterDiv.replace('{{footer}}',footer);
        this.$main.html(hint+title+tbody+footer);
    }

    renderDatetime(){
        let [hint,title,thead,tbody,footer]=['','','','',''];
        switch(this.vStep){
            case 0:
                hint=this.renderHint(this.vCfg.type=='datetime'?'date':'dateBegin');
                title=this.renderTitle('date');
                thead=this.renderThead('date');
                tbody=this.renderTbody('date');
                break;
            case 1:
                hint=this.renderHint(this.vCfg.type=='datetime'?'time':'timeBegin');
                title=this.renderTitle('time');
                thead=this.renderThead('time');
                tbody=this.renderTimeTbody();
                break;
            case 2:
                hint=this.renderHint('dateEnd');
                title=this.renderTitle('date');
                thead=this.renderThead('date');
                tbody=this.renderTbody('date');
                break;
            case 3:
                hint=this.renderHint('timeEnd');
                title=this.renderTitle('time');
                thead=this.renderThead('time');
                tbody=this.renderTimeTbody();
                break;
        }
        footer=this.renderFooter();
        if(hint)
            hint = tmplHintDiv.replace('{{hint}}',hint);
        if(title)
            title = tmplTitleDiv.replace('{{title}}',title);
        if(tbody)
            tbody = replaceByObj(tmplTable,{thead,tbody});
        if(footer)
            footer = tmplFooterDiv.replace('{{footer}}',footer);
        this.$main.html(hint+title+tbody+footer);
    }

    renderWeek(){
        let [hint,title,thead,tbody,footer]=['','','','',''];
        if(this.vCfg.type =='week-range'){
            if(this.vStep==0)
                hint=this.renderHint('weekBegin');
            else
                hint=this.renderHint('weekEnd');
        }
        else
            hint=this.renderHint();
        title=this.renderTitle();
        thead=this.renderThead();
        tbody=this.renderTbody();
        footer=this.renderFooter();
        if(hint)
            hint = tmplHintDiv.replace('{{hint}}',hint);
        if(title)
            title = tmplTitleDiv.replace('{{title}}',title);
        if(tbody)
            tbody = replaceByObj(tmplTable,{thead,tbody});
        if(footer)
            footer = tmplFooterDiv.replace('{{footer}}',footer);
        this.$main.html(hint+title+tbody+footer);
    }

    renderMonth(){
        let [hint,title,thead,tbody,footer]=['','','','',''];
        if(this.vCfg.type =='month-range'){
            if(this.vStep==0)
                hint=this.renderHint('monthBegin');
            else
                hint=this.renderHint('monthEnd');
        }
        else
            hint=this.renderHint();
        title=this.renderTitle();
        thead=this.renderThead();
        tbody=this.renderTbody();
        footer=this.renderFooter();

        if(hint)
            hint = tmplHintDiv.replace('{{hint}}',hint);
        if(title)
            title = tmplTitleDiv.replace('{{title}}',title);
        if(tbody)
            tbody = replaceByObj(tmplTable,{thead,tbody});
        if(footer)
            footer = tmplFooterDiv.replace('{{footer}}',footer);
        this.$main.html(hint+title+tbody+footer);
    }

    renderQuarter(){
        let [hint,title,thead,tbody,footer]=['','','','',''];
        if(this.vCfg.type =='quarter-range'){
            if(this.vStep==0)
                hint=this.renderHint('quarterBegin');
            else
                hint=this.renderHint('quarterEnd');
        }
        else
            hint=this.renderHint();
        title=this.renderTitle();
        thead=this.renderThead();
        tbody=this.renderTbody();
        footer=this.renderFooter();

        if(hint)
            hint = tmplHintDiv.replace('{{hint}}',hint);
        if(title)
            title = tmplTitleDiv.replace('{{title}}',title);
        if(tbody)
            tbody = replaceByObj(tmplTable,{thead,tbody});
        if(footer)
            footer = tmplFooterDiv.replace('{{footer}}',footer);
        this.$main.html(hint+title+tbody+footer);
    }

    renderYear(){
        let [hint,title,thead,tbody,footer]=['','','','',''];
        if(this.vCfg.type =='year-range'){
            if(this.vStep==0)
                hint=this.renderHint('yearBegin');
            else
                hint=this.renderHint('yearEnd');
        }
        else
            hint=this.renderHint();
        title=this.renderTitle();
        thead=this.renderThead();
        tbody=this.renderTbody();
        footer=this.renderFooter();
        if(hint)
            hint = tmplHintDiv.replace('{{hint}}',hint);
        if(title)
            title = tmplTitleDiv.replace('{{title}}',title);
        if(tbody)
            tbody = replaceByObj(tmplTable,{thead,tbody});
        if(footer)
            footer = tmplFooterDiv.replace('{{footer}}',footer);
        this.$main.html(hint+title+tbody+footer);
    }

    renderItem(item,type){
        /* item type  year, quanter , week ,date,
            HourTitle Hour,mimuteTitle minute secondTitle,second */
        let [dataHtml,iconHtml] = [,'',''];
        let [out, inside, now] = ['','',''];
        if(!item.name)
            item.name = item.code;

        if(this.vSelect.length==1 && item.code==this.vSelect[0])
            inside='inside';
        if(this.vSelect.length==2 && item.code>=this.vSelect[0] && item.code<=this.vSelect[1])
            inside='inside';

        switch(type){
            case 'hourTitle':
                dataHtml = replaceByObj(tmplSpan,{style:'',type:'hour-next',dataCode:'',name:'时',hint:''});
                if(this.vTimeType !=3)
                    iconHtml = replaceByObj(tmplIcon,{type:'hour-next',
                        dataCode:'',hint:tmplHint.replace("{{hint}}",'切换')});
                break;
            case 'hour':
                dataHtml = replaceByObj(tmplSpan,{style:'',type:'hour',
                    dataCode:item.code,name:item.name,hint:""});
                break;
            case 'minuteTitle':
                dataHtml = replaceByObj(tmplSpan,{style:'',type:'minute-next',dataCode:'',name:'分',hint:''});
                iconHtml = replaceByObj(tmplIcon,{type:'minute-next',
                    dataCode:'',hint:tmplHint.replace("{{hint}}",'切换')});
                break;
            case 'minute':
                dataHtml = replaceByObj(tmplSpan,{style:'',type:'minute',
                    dataCode:item.code,name:item.name,hint:""});
                break;
            case 'secondTitle':
                dataHtml = replaceByObj(tmplSpan,{style:'',type:'second-next',dataCode:'',name:'秒',hint:""});
                iconHtml = replaceByObj(tmplIcon,{type:'second-next',
                    dataCode:'',hint:tmplHint.replace("{{hint}}",'切换')});
                break;
            case 'second':
                dataHtml = replaceByObj(tmplSpan,{style:'',type:'second',
                    dataCode:item.code,name:item.name,hint:''});
                break;
            case 'date':
            case 'date-range':
                // 是否在本月中
                if(this.vMonth!=item.code.substr(0,7))
                    out ='out';
                // 是否是 今天
                if(item.code== dateFormat(new Date(),'yyyy-MM-dd'))
                    now = 'now';
                dataHtml = replaceByObj(tmplSpan,{style:replaceByObj(tmplClass,{out,inside,now}),
                    type:'date',dataCode:item.code,name:item.name,hint:''});
                break;
            case 'year-set':
                dataHtml = replaceByObj(tmplSpan,{style:'',
                    type:'year-select',dataCode:item.code,name:item.name,hint:''});
                break;
            case 'month-set':
                dataHtml = replaceByObj(tmplSpan,{style:'',
                    type:'month-select',dataCode:item.code,name:item.name,hint:''});
                break;
            case 'week':
            case 'week-range':
                // 是否是本周
                if(item.code== dateFormat(new Date(),'W'))
                    now = 'now';
                dataHtml = replaceByObj(tmplSpan,{style:replaceByObj(tmplClass,{out,inside,now}),
                    type:'week',dataCode:item.code,name:item.name,
                    hint:'title="'+item.from+' ~ '+item.to+'"'});
                break;
            case 'month':
            case 'month-range':
                if(item.code== dateFormat(new Date(),'yyyy-MM'))
                    now = 'now';
                dataHtml = replaceByObj(tmplSpan,{style:'',
                    type:'month',dataCode:item.code,name:item.name,hint:''});
                break;
            case 'quarter':
            case 'quarter-range':
                if(item.code== dateFormat(new Date(),'yyyy'))
                    now = 'now';
                dataHtml = replaceByObj(tmplSpan,{style:'',
                    type:'quarter',dataCode:item.code,name:item.name,hint:''});
                break;
            case 'year':
            case 'year-range':
                if(item.code== dateFormat(new Date(),'yyyy'))
                    now = 'now';
                dataHtml = replaceByObj(tmplSpan,{style:'',
                    type:'year',dataCode:item.code,name:item.name,hint:''});
                break;
        }
        return tmplItem.replace('{{item}}',dataHtml+iconHtml);
    }

    /*
    *  date 类型  今天 昨天  清除
    *  datetime 类型-date :  time  现在 清除
    *  datetime 类型-time :  date   清除 确认
    *  time 类型  清除，确认
    * */
    renderFooter(renderType){
        let [time,date,now,yesterday,today,preMonth,month,preWeek,week,ok]=['','','','','','','','','',''];
        let clear = replaceByObj(tmplButton,{name:'清除',type:'type="date-clear"'});
        let type = renderType||this.vCfg.type;
        switch(type){
            case 'date':
                today = replaceByObj(tmplSpan,{name:'今天',type:'date-today',
                style:'',hint:'',dataCode:''});
                yesterday = replaceByObj(tmplSpan,{name:'昨天',type:'date-yesterday',
                    style:'',hint:'',dataCode:''});
                break;
            case  'date-range':
                preMonth = replaceByObj(tmplSpan,{name:'上月',type:'date-pre-month',
                    style:'',hint:'',dataCode:''});
                preWeek =  replaceByObj(tmplSpan,{name:'上周',type:'date-pre-week',
                    style:'',hint:'',dataCode:''});
                month = replaceByObj(tmplSpan,{name:'本月',type:'date-the-month',
                    style:'',hint:'',dataCode:''});
                week  = replaceByObj(tmplSpan,{name:'本周',type:'date-the-week',
                    style:'',hint:'',dataCode:''});
                break;
            case 'time':
            case 'time-range':
                ok  = replaceByObj(tmplButton,{name:'确认',type:'type="date-ok"'})
                break;
            case 'datetime':
                if(this.vStep ==0){
                   /* now =replaceByObj(tmplSpan,{name:'现在',type:'date-now',
                        style:'',hint:'',dataCode:''});*/
                    time = replaceByObj(tmplIcon,{dataCode:'',hint:'',icon:'icon-f-time',
                        type:"time-show"})
                }

                if(this.vStep==1){
                    ok  = replaceByObj(tmplButton,{name:'确认',type:'type="date-ok"'});
                    date = replaceByObj(tmplIcon,{dataCode:'',hint:'',icon:'icon-f-date',
                        type:"date-show"})
                }

            case 'datetime-range':
                if([0,2].includes(this.vStep)){
                    /* now =replaceByObj(tmplSpan,{name:'现在',type:'date-now',
                         style:'',hint:'',dataCode:''});*/
                    time = replaceByObj(tmplIcon,{dataCode:'',hint:'',icon:'icon-f-time',
                        type:"time-show"})
                }

                if([1,3].includes(this.vStep)){
                    ok  = replaceByObj(tmplButton,{name:'确认',type:'type="date-ok"'});
                    date = replaceByObj(tmplIcon,{dataCode:'',hint:'',icon:'icon-f-date',
                        type:"date-show"})
                }

                break;
            case 'month-set':
            case 'year-set':
                clear ='';
                break;

        }
        let html = replaceByObj(tmplFooter,{time,now,date,yesterday,today,preMonth,month,preWeek,week,clear,ok})
        return html.trim();
    }
    /*记录数据为 字符串，根据 字符串 再格式化
    * 日期  yyyy-MM-dd
    * 日期 时间 yyyy-MM-dd hh:mm:ss
    * 时间 hh:mm:ss
    * 周 2021W01
    * 月 202101
    * 季度 2021Q1
    * 年  2020
    * 根据类型 格式化为目标格式数据
    * 目标格式
    *     yyyy 年
    *     W iso周
    *     M 月
    *     d 日
    *     H 上午 下午 小时数
    *     h 24 小时数
    *     m 分钟
    *     s 秒
    * */
    getFormat(data,type,format){
        let value;
        switch(type){
            case 'date':
            case 'datetime':
                value = data;
                break;
            case 'time':
            case 'time-range':
                value = '1900-01-01 '+data;
                break;
            case 'week':
            case 'week-range':
                value = getFirstDateOfWeek(data);
                break;
            case 'month':
            case 'month-range':
                value = data+'-01';
                break;
            case 'quarter':
            case 'quarter-range':
                value = data.substr(0,4)+'-'+fillZero(2,(data.substr(5,1)-1)*3+1)+'-01'
                break;
            case 'year':
            case 'year-range':
                value = data+'-01-01';
                break;
        }
        let tmp = new Date(value);
        return tmp=="Invalid Date"?'':dateFormat(new Date(value),format);
    }

    getRenderJd(renderType){
        let jd =[];
        let type = renderType?renderType:this.vCfg.type;
        let code ='';
        switch (type){
            case 'date':
            case 'date-range':
            case 'datetime':
            case 'datetime-range':
                let d = new Date((this.vMonth+'-01'));
                let bDate = d.valueOf() -(d.getDay()==0?7:d.getDay())*24*60*60*1000+24*60*60*1000;
                for(let i =0;i<42;i++){
                    code = dateFormat(new Date(bDate+i*24*60*60*1000),'yyyy-MM-dd');
                    jd.push({code,name:code.substr(8,2)-0});
                }
                break;
            case 'week':
            case 'week-range':
                let weekNum = getWeeksOfYear(this.vYear);
                for(let i =1;i<=weekNum;i++){
                    let code = this.vYear+'W'+(i<10?'0'+i.toString():i.toString());
                    jd.push({code,name:i,from:getFirstDateOfWeek(code),to:getLastDateOfWeek(code)});
                }

                break;
            case 'month':
            case 'month-range':
                for(let i =1;i<13;i++)
                    jd.push({code:this.vYear+'-'+(i<10?'0'+i.toString():i.toString()),
                    name:i+'月'});
                break;
            case 'quarter':
            case 'quarter-range':
                for(let i =1;i<5;i++)
                    jd.push({code:this.vYear+'Q'+i,name:i+'季度'});
                break;
            case 'year':
            case 'year-range':
            case 'year-set':
                for(let i =0;i<12;i++)
                    jd.push({code:this.vYear-0+i-6});
                break;
            case 'month-set':
                for(let i =1;i<13;i++){
                    code = i+'';
                    jd.push({code,name:code+'月'})
                }
                break;
        }
        return jd;
    }

    evDrop(e){
        if(this.vCfg.readonly)
            return;
        if(this.$main.is(':visible'))
            return;
        this.renderByType();
        this.renderStatus("add","active");
        if(this.vCfg.showType=='top'){
        	let pos = this.$head.outerHeight()+1; 
        	this.$main.css("bottom",pos+"px");
        }
          
        this.$main.show();
        //激活事件
        $(document).unbind(this.vClickId);
        $(document).on(this.vClickId,this.evOff.bind(this));
    }

    evItemClick(e){
        let code = e.target.getAttribute("data-code");
        switch(this.vCfg.type){
            case 'date':
            case 'week':
            case 'month':
            case 'quarter':
            case 'year':
                this.vSelect.length = 0;
                this.vSelect[0] = code;
                this.renderHead();
                this.$main.hide();
                if(this.vBindEvent)
                    this.vBindEvent(this.vSelect.join(','));
                break;
            case 'date-range':
            case 'week-range':
            case 'month-range':
            case 'quarter-range':
            case 'year-range':
                //选择from
               if(this.vStep==0){
                    this.vSelect.length = 0;
                    this.vSelect[0] = code;
                    this.vStep = (this.vStep+1)%2;
                    this.renderHead();
                    this.renderByType();
                    if(this.vBindEvent)
                        this.vBindEvent(this.vSelect.join(','));
                }else{
                    if(code< this.vSelect[0]){
                        this.vSelect[1] = this.vSelect[0];
                        this.vSelect[0]= code
                    }else
                         this.vSelect[1] = code;
                   this.vStep = (this.vStep+1)%2;
                    this.renderHead();
                    this.$main.hide();
                    if(this.vBindEvent)
                        this.vBindEvent(this.vSelect.join(','));
                }

                break;
            case 'datetime':
                if(this.vStep ==0)
                    this.vSelect[0] = code+' 08:00:00';
                else
                    this.vSelect[1] = code+' 08:00:00';
                this.renderHead();               
                this.vStep = 1;
                this.renderDatetime();
                if(this.vBindEvent)
                    this.vBindEvent(this.vSelect.join(','));
                break;
            case 'datetime-range':
                if(this.vStep ==0){
                    this.vSelect[0] = code+' 08:00:00';
                }
                if(this.vStep==2){
                    this.vSelect[1] = code+' 08:00:00';
                }
                this.vStep =  (this.vStep+1)%4;
                this.renderTime();
                this.renderHead();
                if(this.vBindEvent)
                    this.vBindEvent(this.vSelect.join(','));
                break;
        }
    }

    evYearTitleClick(e){
        this.vYear = this.vMonth.substr(0,4);
        let title = this.renderTitle('year-set');
        let tbody = this.renderTbody('year-set');
        if(title)
            title = tmplTitleDiv.replace('{{title}}',title);
        if(tbody)
            tbody = replaceByObj(tmplTable,{thead:'',tbody});
        this.$main.html(title+tbody);
    }

    evMonthTitleClick(e){
        this.vYear = this.vMonth.substr(0,4);
        let title = this.renderTitle('month-set');
        let tbody = this.renderTbody('month-set');
        if(title)
            title = tmplTitleDiv.replace('{{title}}',title);
        if(tbody)
            tbody = replaceByObj(tmplTable,{thead:'',tbody});
        this.$main.html(title+tbody);
    }

    evYearSelectClick(e){
        this.vYear = e.target.getAttribute("data-code");
        this.vMonth = this.vYear+this.vMonth.substr(4,3);
        this.renderByType();
    }

    evMonthSelectClick(e){
        this.vMonth = this.vYear+'-'+fillZero(2,e.target.getAttribute("data-code"));
        this.renderByType();
    }

    evPreClick(e){
        this.setMonthYear(-1);
        this.renderByType();
    }

    evNextClick(e){
        this.setMonthYear(1);
        this.renderByType();
    }

    evDoublePreClick(e){
        this.setMonthYear(-12);
        this.renderByType();
    }

    evDoubleNextClick(e){
        this.setMonthYear(12);
        this.renderByType();
    }

    evYearDoublePreClick(e){
        this.vYear =  this.vYear-12;
        this.vMonth = this.vYear+this.vMonth.substr(4,3);
        this.renderByType();
    }

    evYearDoubleNextClick(e){
        this.vYear =  this.vYear-0+12;
        this.vMonth = this.vYear+this.vMonth.substr(4,3);
        this.renderByType();
    }

    evHourNextClick(e){
        this.vHourShow = (this.vHourShow+1)%2;
        this.renderTime();
    }

    evMinuteNextClick(e){
        this.vMinuteShow = (this.vMinuteShow+1)%5;
        this.renderTime();
    }

    evSecondNextClick(e){
        this.vSecondShow = (this.vSecondShow+1)%5;
        this.renderTime();
    }

    evRootClick(e){
        this.vTmpEvent.timeStamp = e.timeStamp;
        this.vTmpEvent.target =e .target;
    };

    setTimeDefaultValue(){
        switch(this.vCfg.type){
            case 'time':
                if(!this.vSelect[0])
                    this.vSelect[0] = '08:00:00';
                break;
            case 'time-range':
                if(this.vStep==0){
                    if(!this.vSelect[0])
                        this.vSelect[0] = '08:00:00';
                }
                if(this.vStep==1){
                    if(!this.vSelect[1])
                        this.vSelect[1] = '08:00:00';
                }
                break;
        }
    };

    replaceTimeValue(key,code){
        let reg;
        let value='';
        switch(key){
            case 'hour':
                if(['time','time-range'].includes(this.vCfg.type)){
                    reg = /^\d{2}/;
                    value =code;
                }
                else{
                    reg = / \d{2}/;
                    value =' '+code;
                }
                break;
            case 'minute':
                reg = /:\d{2}/;
                value =':'+code;
                break;
            case 'second':
                reg = /:\d{2}$/;
                value =':'+code;
                break;
        }
       switch(this.vCfg.type+this.vStep){
           case 'time0':
           case 'time-range0':
           case 'datetime1':
           case 'datetime-range1':
               this.vSelect[0] = this.vSelect[0].replace(reg,value) ;
               break;
           default:
               this.vSelect[1] =  this.vSelect[1].replace(reg,value) ;
       }
    }

    /*时间click*/
    evTimeClick(e){
        let code = e.target.getAttribute("data-code");
        let key = e.target.getAttribute("type");
        this.setTimeDefaultValue();
        this.replaceTimeValue(key,code);
        this.renderHead();
        //操作记录
        switch(key){
            case 'hour':
                this.vTimeFlag = this.vTimeFlag |0b1
                break;
            case 'minute':
                this.vTimeFlag = this.vTimeFlag |0b10
                break;
            case 'second':
                this.vTimeFlag = this.vTimeFlag |0b100
                break;
        }
        // 根据实际情况判断
        let isDone =false;
        switch(this.vTimeType) {
            case 1:
                if (this.vTimeFlag == 0b111)
                    isDone = true;
                break;
            case 2:
                if (this.vTimeFlag == 0b11)
                    isDone = true;
                break;
            case 3:
                if (this.vTimeFlag == 0b1)
                    isDone = true;
                break;
        }
        if(isDone){
            this.vTimeFlag=0b0;
            switch(this.vCfg.type){
                case 'time':
                    this.$main.hide();
                    break;
                case 'datetime':
                    this.vStep = (this.vStep+1)%(this.vCfg.type=='datetime-range'?4:2);
                    this.$main.hide();
                    break;
                case 'time-range':
                    this.vStep = (this.vStep+1)%(this.vCfg.type=='datetime-range'?4:2);
                    if(this.vStep==1)
                        this.renderTime();
                    else
                        this.$main.hide();
                    break;
                case 'datetime-range':
                    this.vStep = (this.vStep+1)%(this.vCfg.type=='datetime-range'?4:2);
                    if(this.vStep==2)
                        this.renderDatetime();
                    else
                        this.$main.hide();
                    break;
            }
        }
        if(this.vBindEvent)
            this.vBindEvent(this.vSelect.join(','));
    }

    evQuickClick(e){
        let key = e.target.getAttribute("type");
        let theMonth=dateFormat(new Date(),'yyyy-MM');
        let preMonth;
        let theWeek =dateFormat(new Date(),'yyyy-ww');
        let preWeek;
        this.vSelect.length = 0;
        switch(key){
            case 'date-today':
                this.vSelect[0] = dateFormat(new Date(),'yyyy-MM-dd');
                this.vMonth = this.vSelect[0].substr(0,7);
                break;
            case 'date-yesterday':
                this.vSelect[0] = dateFormat(new Date(new Date()-24*60*60*1000),'yyyy-MM-dd');
                this.vMonth = this.vSelect[0].substr(0,7);
                break;
            case 'date-pre-week':
                preWeek = weekAdd(theWeek,-1);
                this.vSelect.push(getFirstDateOfWeek(preWeek));
                this.vSelect.push(getLastDateOfWeek(preWeek));
                break;
            case 'date-the-week':
                    this.vSelect.push(getFirstDateOfWeek(theWeek));
                this.vSelect.push(getLastDateOfWeek(theWeek));
                break;
            case 'date-pre-month':
                preMonth =monthAdd(theMonth,-1);
                this.vSelect.push(preMonth+'-01');
                this.vSelect.push(getLastDateOfMonth(preMonth));
                this.vMonth = this.vSelect[0].substr(0,7);
                break;
            case 'date-the-month':
                this.vSelect.push(theMonth+'-01');
                this.vSelect.push(getLastDateOfMonth(theMonth));
                this.vMonth = this.vSelect[0].substr(0,7);
                break;
        }
        this.renderHead();
        this.$main.hide();
        if(this.vBindEvent)
            this.vBindEvent(this.vSelect.join(','));
        

    }

    evClearClick(e){
        this.vSelect.length=0;
        this.vStep = 0 ;
        switch(this.vCfg.type){
            case 'time':
            case 'time-range':
                this.renderTime();
                break;
            case 'date':
                this.renderDate();
                break;
            case 'date-range':
                break;
            case 'datetime':
            case 'datetime-range':
                this.renderDatetime();
                break;
            case 'week':
                break;
            case 'week-range':
                break;
            case 'month':
                break;
            case 'month-range':
                break;
            case 'quarter':
                break;
            case 'quarter-range':
                break;
            case 'year':
                break;
            case 'year-range':
                break;
        }
        this.renderHead();
        if(this.vBindEvent)
            this.vBindEvent(this.vSelect.join(','));
    }

    //time 才有 ok
    evOkClick(){
        switch(this.vCfg.type){
            case 'time':
                this.$main.hide();
                this.vTimeFlag=0b0;
                break;
            case 'datetime':
                this.vStep = (this.vStep+1)%(this.vCfg.type=='datetime-range'?4:2);
                this.$main.hide();
                break;
            case 'time-range':
                //this.vStep = (this.vStep+1)%(this.vCfg.type=='datetime-range'?4:2);
                if(this.vStep==0){
                    if(this.vSelect[0]){
                        this.vStep = (this.vStep+1)%(this.vCfg.type=='datetime-range'?4:2);
                        this.renderTime();
                        this.vTimeFlag=0b0;
                    }
                }
                else{
                    if(this.vSelect[1]){
                        this.vStep = (this.vStep+1)%(this.vCfg.type=='datetime-range'?4:2);
                        this.$main.hide();
                        this.vTimeFlag=0b0;
                    }
                }

                break;
            case 'datetime-range':
                this.vStep = (this.vStep+1)%(this.vCfg.type=='datetime-range'?4:2);
                if(this.vStep==2)
                    this.renderDatetime();
                else
                    this.$main.hide();
                break;

        }
        this.renderHead();
        if(this.vBindEvent)
            this.vBindEvent(this.vSelect.join(','));
    }

    evTimeShowClick(){
        this.vTimeFlag=0b0;
        //默认时间
        if(this.vStep==0 && !this.vSelect[0])
            this.vSelect[0] = dateFormat(new Date(),'yyyy-MM-dd 08:00:00');
        if(this.vStep==2 && !this.vSelect[1])
            this.vSelect[1] = dateFormat(new Date(),'yyyy-MM-dd 08:00:00');
        this.vStep = (this.vStep+1)%(this.vCfg.type=='datetime-range'?4:2);
        this.renderDatetime();
        this.renderHead();
        if(this.vBindEvent)
            this.vBindEvent(this.vSelect.join(','));
    }

    evDateShowClick(){
        //默认时间
        if(this.vStep==1 && !this.vSelect[0])
            this.vSelect[0] = dateFormat(new Date(),'yyyy-MM-dd 08:00:00');
        if(this.vStep==3 && !this.vSelect[1])
            this.vSelect[1] = dateFormat(new Date(),'yyyy-MM-dd 08:00:00');
        this.vStep = (this.vStep-1)%(this.vCfg.type=='datetime-range'?4:2);
        this.renderDatetime();
        this.renderHead();
        if(this.vBindEvent)
            this.vBindEvent(this.vSelect.join(','));
    }

    evKeydown(e){
        let keynum = window.event ? e.keyCode : e.which;
        switch(keynum){
            //enter
            case 13:
                break;
            //tab 失去焦点
            case 9:
                this.evOff.bind(this)(e);
                break;
            // esc
            case 27:
                this.$main.hide();
                break;
        }
    }

    evFocus(e){
        this.evDrop(null);
    }

    evOff(e){
        if(e.type=='keydown' ||
                (e.type=='click' && (this.vTmpEvent.timeStamp !=e.timeStamp || this.vTmpEvent.target !=e.target))){
            //数据处理
            if(/range/.test(this.vCfg.type)){
                if(!this.vSelect[1] && this.vSelect[0]){
                    this.vSelect[1] = this.vSelect[0]
                    this.renderHead();
                    if(this.vBindEvent)
                        this.vBindEvent(this.vSelect.join(','));
                }
                if(this.vSelect[0]>this.vSelect[1]){
                    let tmp = this.vSelect[0];
                    this.vSelect[0]= this.vSelect[1]
                    this.vSelect[1] =tmp;
                    this.renderHead();
                    if(this.vBindEvent)
                        this.vBindEvent(this.vSelect.join(','));
                }
            }
            this.$main.hide();
            this.vStep=0;
            this.renderStatus("remove",'active');
            this.verify();
            //取消事件
            $(document).unbind(this.vClickId);
        }
    }
    setMonthYear(span){
        switch(this.vCfg.type){
            case 'date':
            case 'date-range':
            case 'datetime':
            case 'datetime-range':
                this.vMonth = monthAdd(this.vMonth,span);
                break;
            default:
                this.vYear = this.vYear-0+span+'';
        }
    }

    setReadonly(status){
        this.vCfg.readonly = status;
        if(status){
            this.renderStatus("add","readonly");
        }else{
            this.renderStatus("remove","readonly");
        }
    }
    verify() {
        let result = true;
        if(this.vCfg.mandatory ){
            if(this.vSelect.length<1){
                this.renderStatus("remove",'valid');
                this.renderStatus("add","invalid");
                result =false
            }else {
                this.renderStatus("remove",'invalid');
                this.renderStatus("add","valid");
            }
        }
        return result;
    }

    setBindEvent(event){
       this.vBindEvent = event;
    };

    setValue(value){
        this.initValue(value);
    };

    getSelect(){
        if(this.vSelect.length>0)
            return this.vSelect.join(',');
        else
            return '';
    }
}